<template>
  <div class="order">
    <div class="todo-header">
      <div class="item-1">
        序号
      </div>
      <div class="item-2">
        生产订单号
      </div>
      <div class="item-2">
        产线
      </div>
      <div class="item-3">
        产品名称
      </div>
      <div class="item-4">
        订单数量
      </div>
      <div class="item-8">
        订单进度
      </div>
      <div class="item-6">
        订单状态
      </div>
      <div class="item-7">
        完工数量
      </div>
    </div>
    <a-carousel v-if="orderList.length" :autoplay="true" dot-position="right" dots="false" :slides-to-show="num" :slides-to-scroll="1" id="carousel">
      <div class="todo-item" v-for="(item,index) in orderList" :key="index">
        <div class="item-1">
          {{ index + 1 }}
        </div>
        <div class="item-2">
          <TableTootip :content="item.orderNum"></TableTootip>
        </div>
        <div class="item-2">
          <TableTootip :content="item.depName"></TableTootip>
        </div>
        <div class="item-3" ref="masterbatch">
          <TableTootip :content="item.masterbatchName"></TableTootip>
        </div>
        <div class="item-4">
          {{item.productQuantity}}
        </div>
        <div class="item-8">
          <progress style="background-color: #f1f2f5;color:#F53F3F;height: 8px;margin-right: 8px;" :value="item.rate" max="100"></progress>{{item.rate}}%
        </div>
        <div class="item-6">
          <span v-if="item.processStatus == '001'" style="display: inline-block;width: 11px;height: 11px;border-radius: 50%;background-color: #F53F3F;margin-right: 5px;"></span>
          <span v-else-if="item.processStatus == '002'" style="display: inline-block;width: 11px;height: 11px;border-radius: 50%;background-color: #0092FC;margin-right: 5px;"></span>
          <span v-else-if="item.processStatus == '003'" style="display: inline-block;width: 11px;height: 11px;border-radius: 50%;background-color: #3FEA4B;margin-right: 5px;"></span>
          <span v-else style="display: inline-block;width: 11px;height: 11px;border-radius: 50%;background-color: #aaa;margin-right: 5px;"></span>
          {{item.processStatusName}}
        </div>
        <div class="item-7">
          {{ item.finishQuantity }}
        </div>
      </div>
    </a-carousel>
    <div class="nodata" v-if="!orderList.length">暂无数据</div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";
import TableTootip from "../../../components/TableTootipHome.vue";

export default {
  components:{
    TableTootip
  },
  data() {
    return{
      orderList:[],
      num:4
    }
  },
  mounted() {
    this.getProductOrderList()
  },
  methods:{
    //生产订单信息
    getProductOrderList() {
      req('post', `dataBoard/getProductOrderList`)
        .then(res => {
          if (res.result === 'success') {
            this.orderList = res.data
            this.num = this.orderList.length<4?this.orderList.length:4
            if(this.orderList.length){
              this.orderList.forEach(item=>{
                item.rate = ((item.finishQuantity/item.productQuantity)*100).toFixed(0)
              })
            }
          }
        })
    },
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
.order {
  position: relative;
  height: 255px;
}
.todo-item,.todo-header {
  display: flex!important;
  line-height: 45px;
  font-size: 14px;
  border-bottom: 1px solid #e8e8e8;
}
.todo-header {
  margin-top: 5px;
  background-color: #f1f2f5;
}
.item-1 {
  width: 4.5%;
  margin-left: 5px;
}
.item-2,.item-4,.item-6 {
  width: 11%;
}
.item-3 {
  width: 24%;
  margin-right: 10px;
}
.item-5{
  width: 15%;
}
.item-7 {
  width: 7.5%;
}
.item-8{
  width: 20%;
}
/* 表示总长度背景色 */
/deep/ progress::-webkit-progress-bar{
  background-color:#eee;
}
/* 表示已完成进度背景色 */
/deep/ progress::-webkit-progress-value{
  background-color:#F53F3F;
}
/deep/ progress::-moz-progress-bar{
  background-color:#F53F3F;
}
@media screen and (max-width: 1440px) {
  .todo-item,.todo-header{
    font-size: 12px;
  }
}
</style>
